<template>
  <div class="video-list-container">
    <!-- 视频1 -->
    <div class="video-item">
      <video class="video-player" controls :src="videoUrl1" preload="metadata"></video>
    </div>
    <!-- 视频2 -->
    <div class="video-item">
      <video class="video-player" controls :src="videoUrl2" preload="metadata" ></video>
    </div>
    <!-- 视频3 -->
    <div class="video-item">
      <video class="video-player" controls :src="videoUrl3" preload="metadata"></video>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 视频地址
const videoUrl1 = ref('https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209105011F0zPoYzHry.mp4');
const videoUrl2 = ref('https://www.w3school.com.cn/example/html5/mov_bbb.mp4');
const videoUrl3 = ref('https://www.w3schools.com/html/movie.mp4');
</script>

<style scoped>
.video-list-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 添加间距 */  
  padding: 16px;/*设置内边距*/ 
  max-width: 1200px;/* 限制最大宽度 */
  margin: 0 auto;
}
.video-item {  
  flex: 1 1 calc(33.333% - 16px); /* 让视频项在一行中均匀分配剩余空间，同时设置基础宽度 */ 
  min-width: 280px; /* 最小宽度，防止视频项过窄 */ 
  position: relative; /* 让视频容器内部自适应 */
  padding-bottom: 56.25%; /* 视频比例 */
  height: 0;
  overflow: hidden;
}
.video-player {
  
  position: absolute;/* 让视频充满容器，同时保持比例 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持视频比例，填充容器，超出部分裁剪 */
}
</style>